home *** CD-ROM | disk | FTP | other *** search
/ PC Format (PL) 2008 March / PCFormat 3_2008.iso / Multimedia / Miro 1.0 / Miro_Installer.exe / resources / css / style.css < prev    next >
Cascading Style Sheet File  |  2007-11-12  |  9KB  |  438 lines
  1. /*/////////////////////////////////////////////
  2.  
  3. CSS For the Desktop Player
  4. -----------------------------------------------
  5. Participatoryculture.org
  6.  
  7. ///////////////////////////////////////////////
  8.  
  9. Some common HTML
  10.  
  11. /////////////////////////////////////////////*/
  12.  
  13.  
  14. a img{
  15.     border: none;
  16.     }
  17.  
  18. body {
  19.     font-family: "Lucida Grande", "Tahoma", "Bitstream Vera Sans", Arial, sans-serif;
  20.     font-size: 12px;
  21.     background-color: #e6edf7;
  22.     margin: 0;
  23.     padding: 0;
  24.     width: 100%;
  25. }
  26.  
  27. .noselect {
  28.     -khtml-user-select: none;
  29.     -moz-user-select: none;
  30.     cursor: default;
  31. }
  32.  
  33. .draggable {
  34.     -khtml-user-drag: element;
  35. }
  36.  
  37.  
  38. /*/////////////////////////////////////////////
  39.  
  40. SIDEBAR
  41. -----------------------------------------------
  42. Contains the channels
  43.  
  44. /////////////////////////////////////////////*/
  45.  
  46. #sidebar{
  47.     padding: 0px;
  48.     margin: 0px;
  49.     width: 100%;
  50.     overflow: hidden;
  51. }
  52.  
  53. .tab-list {
  54.        padding: 2px 0px 3px 0px;
  55.        margin: 0px;
  56.        width: 100%;
  57.        border-top: 1px solid #b6bfce;
  58. }
  59.  
  60. .tab-list.first {
  61.     padding-top: 0px;
  62.     border-top: none;
  63. }
  64.        
  65. .tab-list li{
  66.        list-style: none;
  67.        clear: both;
  68.        margin: 1px 0px 0px 0px;
  69. }
  70.  
  71. .tab-list li:hover {
  72.     cursor: default;
  73. }
  74.  
  75. a.feeditem {
  76.     display: block;
  77.     padding: 1px 5px 1px 16px;
  78.     color: #000;
  79.     font-size: 11px;
  80.     text-decoration: none;
  81.     height: 20px;
  82.     white-space: nowrap;
  83. }
  84.  
  85. a.feeditem.folder {
  86.     padding-left: 3px;
  87. }
  88.  
  89. .child a.feeditem {
  90.    padding-left: 37px;
  91. }
  92.  
  93. a.feeditem.blinking {
  94.     background: #ff9;
  95. }
  96.  
  97. .selected a.feeditem, .selected-inactive a.feeditem {
  98.     color: #fff;
  99.     font-weight: bold;
  100. }
  101.  
  102. a.feeditem span {
  103.     margin-left: 6px;
  104.     margin-top: 3px;
  105.     padding: 0px 0 5px 0px;
  106.     overflow: hidden;
  107. }
  108.  
  109. .selected a.feeditem span, .selected-inactive a.feeditem span {
  110.     color: #fff;
  111. }
  112.  
  113. .selected a.feeditem {
  114.     background: url(../images/channel_bg.png) 0% 0% repeat-x; 
  115. }
  116.  
  117. .selected-inactive a.feeditem {
  118.     background: url(../images/channel_bg.png) 0px -50px repeat-x; 
  119. }
  120.  
  121. a.feeditem img.icon {
  122.     height: 20px;
  123.     width: 20px;
  124.     margin: 0;
  125.     border: 0;
  126.     float: left;
  127. }
  128.  
  129. .expanded-triangle {
  130.     margin: 4px 0px;
  131.     border: 0px;
  132.     float: left;
  133. }
  134.  
  135. .dnd-background-outer  {
  136.     position: relative;
  137.     height: 22px;
  138.     width: 100%;
  139. }
  140.  
  141. .dnd-background-inner1, .dnd-background-inner2  {
  142.     position: absolute;
  143.     height: 22px;
  144. }
  145.  
  146. /* DND Folder drop effects 
  147.  
  148. The basic strategy here is to create 3 hidden DIVs for the left, right and
  149. middle highlight images.  When a drag is in place, the div that the mouse is
  150. over gets the drag-highlight class and we use that to show the divs. 
  151.  
  152. The divs are absolutely positioned so they don't interrupt the layout of the
  153. tab lists.
  154. */
  155.  
  156. .tab-container-drop-target {
  157.     position: relative;
  158.     margin: 0px;
  159.     padding: 0px;
  160. }
  161.  
  162. .tab-container-drop-target .dnd-container-drop-indicator {
  163.     display: none;
  164.     position: absolute;
  165.     width: 100%;
  166.     height: 22px;
  167.     z-index: -1;
  168. }
  169.  
  170. .tab-container-drop-target.drag-highlight .dnd-container-drop-indicator {
  171.     display: block;
  172. }
  173.  
  174.  
  175. .dnd-container-drop-indicator.mid {
  176.     background: url(../images/dnd-highlight-mid.png) top left repeat-x;
  177.     left: 5px;
  178.     right: 5px;
  179.     width: auto;
  180. }
  181.  
  182. .dnd-container-drop-indicator.left {
  183.     background: url(../images/dnd-highlight-left.png) top left no-repeat;
  184. }
  185.  
  186. .dnd-container-drop-indicator.right {
  187.     background: url(../images/dnd-highlight-right.png) top right no-repeat;
  188. }
  189.  
  190. /* DND reorder effects */
  191.  
  192. .tab-drop-target {
  193.     position: relative;
  194.     margin: 0px;
  195.     padding: 0px;
  196. }
  197.  
  198. .dnd-reorder-indicator {
  199.     display: none;
  200.     position: absolute;
  201. }
  202.  
  203. .drag-highlight > .dnd-reorder-indicator {
  204.     display: block;
  205. }
  206.  
  207. .dnd-reorder-indicator.circle  {
  208.     width: 8px;
  209.     height: 8px;
  210.     background: url("../images/dnd-reorder-circle.png");
  211. }
  212.  
  213. .dnd-reorder-indicator.line  {
  214.     width: auto;
  215.     height: 4px;
  216.     background: url("../images/dnd-reorder-line.png") repeat-x;
  217. }
  218.  
  219. .tab-drop-target .dnd-reorder-indicator.circle  {
  220.     top: -4px;
  221.     left: 11px;
  222. }
  223.  
  224. .tab-drop-target .dnd-reorder-indicator.line {
  225.     top: -2px;
  226.     left: 17px;
  227.     right: 0px;
  228. }
  229.  
  230. .tab-drop-target.child .dnd-reorder-indicator.line {
  231.    left: 38px;
  232. }
  233.  
  234. .tab-drop-target.child .dnd-reorder-indicator.circle {
  235.    left: 32px;
  236. }
  237.  
  238. /* These next ones catch things like dragging a playlist all the way up to the
  239. * channels tablist */
  240.  
  241. .tab-list-drop-target {
  242.        position: relative;
  243.        margin: 0px;
  244.        padding: 0px;
  245.        min-height: 10px;
  246. }
  247.  
  248. .tab-list-drop-target > .dnd-reorder-indicator {
  249.     z-index: 3;
  250. }
  251.  
  252. .tab-list-drop-target > .dnd-reorder-indicator.circle  {
  253.     left: 11px;
  254.     bottom: -8px;
  255.     height: 8px;
  256.     width: 8px;
  257. }
  258.  
  259. .tab-list-drop-target > .dnd-reorder-indicator.line {
  260.     left: 17px;
  261.     bottom: -6px;
  262.     height: 4px;
  263.     width: 100%;
  264. }
  265.  
  266. .tab-list-drop-target > .dnd-reorder-indicator.show-on-top.circle {
  267.     top: -7px;
  268. }
  269.  
  270. .tab-list-drop-target > .dnd-reorder-indicator.show-on-top.line {
  271.     top: -5px;
  272. }
  273.  
  274. a.feeditem div.name {
  275.     padding: 3px;
  276.     overflow: hidden;
  277. }
  278.  
  279. .tab-list-end {
  280.     height: 5px;
  281. }
  282.  
  283. .feed-loading-icon {
  284.     float: right;
  285.     position: relative;
  286.     width: 16px;
  287.     height: 16px;
  288.     margin: 1px 0px 0 0;
  289.     padding: 1px;
  290.     z-index: 2;
  291.     background: url(../images/feed-loading-normal.gif) top left no-repeat;
  292. }
  293.  
  294. a.feeditem.normal .feed-loading-icon {
  295.     background: url(../images/feed-loading-normal.gif) top left no-repeat;
  296. }
  297. .selected a.feeditem .feed-loading-icon {
  298.     background: url(../images/feed-loading-selected.gif) top left no-repeat;
  299. }
  300. .selected-inactive a.feeditem .feed-loading-icon {
  301.     background: url(../images/feed-loading-selected-inactive.gif) top left no-repeat;
  302. }
  303.  
  304. .number-count {
  305.     font-size: 11px;
  306.     color: #FFFFFF;
  307.     padding: 2px 0px 4px 0px;
  308.     font-weight: normal;
  309.     background: left top repeat-x;
  310.     min-width: 7px;
  311.         text-align: center;
  312. }
  313.  
  314. .left-bubble {
  315.         padding-left: 8px;
  316.     margin: 1px 0px 0px 5px;
  317.     float: right;
  318.     position: relative;
  319.     z-index: 2;
  320.     background: left top no-repeat;
  321. }
  322.  
  323. .left-bubble.second {
  324.     margin-left: 1px;
  325. }
  326.  
  327. .right-bubble {
  328.     background: right top no-repeat;
  329.         padding-right: 8px;
  330. }
  331.  
  332. .left-bubble.green {
  333.     background-image: url(../images/circle-green-left.png);
  334. }
  335.  
  336. .right-bubble.green {
  337.     background-image: url(../images/circle-green-right.png);
  338. }
  339.  
  340. .number-count.green {
  341.     background-image: url(../images/circle-green-mid.png);
  342. }
  343.  
  344. .left-bubble.blue {
  345.     background-image: url(../images/circle-blue-left.png);
  346. }
  347.  
  348. .right-bubble.blue {
  349.     background-image: url(../images/circle-blue-right.png);
  350. }
  351.  
  352. .number-count.blue {
  353.     background-image: url(../images/circle-blue-mid.png);
  354. }
  355.  
  356. .left-bubble.orange {
  357.     background-image: url(../images/circle-orange-left.png);
  358. }
  359.  
  360. .right-bubble.orange {
  361.     background-image: url(../images/circle-orange-right.png);
  362. }
  363.  
  364. .number-count.orange {
  365.     background-image: url(../images/circle-orange-mid.png);
  366. }
  367.  
  368. .new-video-play-button {
  369.     position: absolute;
  370.     left: 6px;
  371.     right: 6px;
  372.     top: 0px;
  373.     height: 19px;
  374.     text-align: center;
  375.     z-index: 5;
  376. }
  377.  
  378. .new-video-play-button:hover {
  379.     background: left top repeat-x;
  380.     background-image: url(../images/circle-green-mid.png);
  381. }
  382.  
  383. .new-video-play-button img {
  384.     display: none;
  385.     width: 11px;
  386.     height: 14px;
  387.     margin-top: 2px;
  388. }
  389.  
  390. .new-video-play-button:hover img {
  391.     display: inline;
  392. }
  393.  
  394. /* Reverse the color scheme for blue bubbles when they are selected */
  395.  
  396. .selected a.feeditem .left-bubble.blue {
  397.     background-image: url(../images/circle-white-left.png);
  398. }
  399.  
  400. .selected a.feeditem .right-bubble.blue {
  401.     background-image: url(../images/circle-white-right.png);
  402. }
  403.  
  404. .selected a.feeditem .number-count.blue {
  405.     color: #4081EC;
  406.     background-image: url(../images/circle-white-mid.png);
  407. }
  408.  
  409. /*///////////////////////////////////////////////
  410.  
  411. Channel guide
  412.  
  413. /////////////////////////////////////////////*/
  414.  
  415. .channel-guide-body {
  416. background-color: #e7e7e7;
  417. }
  418.  
  419. #channel-guide-loading-image{
  420.     width: 324px;
  421.     height: 128px;
  422.     position: absolute;
  423.     top: 50%;
  424.     left: 50%;
  425.     margin: -64px 0 0 -162px;
  426.     background: url(../images/loading.gif) no-repeat left top;
  427.     }
  428.  
  429. #channel-guide-loading-text{
  430.         position: absolute;
  431.     font-size: 18px;
  432.         left: 16px;
  433.         right: 16px;
  434.         top: 30px;
  435.         height: 50px;
  436.     text-align: center;
  437.     }
  438.